<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流程处理</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
    <!--LogicFlow core包css-->
    <link rel="stylesheet" href="../../../logicflow/core/dist/style/index.css"/>
    <!--LogicFlow extension包css-->
    <link rel="stylesheet" href="../../../logicflow/extension/lib/style/index.css"/>
    <style>
        .task-form-label {
            text-align: left;
            width: 120px;
        }

        .task-form-text {
            display: block;
            padding: 9px 15px;
        }

        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .lf-control-see {
            background-image: url('');
        }

        .lf-control-import {
            background-image: url('');
        }

        .lf-control-clear {
            background-image: url('');
        }

        .lf-control-save {
            background-image: url('');
        }

        .lf-control-refresh {
            background-image: url("");
        }

        .lf-control-exit {
            background-image: url('');
        }


        .custom-minimap {
            background-image: url();
        }

        #lf-graph {
            margin: 20px 20px 0px 20px;
            width: 98%;
            height: 100%;
        }


        /*tab title*/
        .drawer-section-list ul li {
            display: inline-block;
            zoom: 1;
            vertical-align: top;
            margin-right: 20px;
            font-size: 16px;
            line-height: 34px;
            color: #373d40;
            cursor: pointer;
        }

        /*选中下划线*/
        .drawer-section-list ul .on {
            color: #488bff;
            border-bottom: 1px solid #488bff;
        }

        /*列表*/
        .drawer-section-info div {
            text-align: left;
            border-top: 1px solid #ececec;
        }
    </style>
</head>

<body>
<div>
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">表单信息</li>
                    <li>流程实例</li>
                    <li>流程图</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <!--表单信息-->
                        <form class="layui-form" id="form-container" lay-filter="forms"></form>
                    </div>
                    <div class="layui-tab-item">
                        <!--流程实例-->
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label task-form-label">流程名称:</label>
                                <div class="layui-input-block">
                                    <span class="task-form-text" id="process-name"></span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label task-form-label">状态:</label>
                                <div class="layui-input-block">
                                    <span class="task-form-text" id="state">刘敏</span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label task-form-label">流程发起人:</label>
                                <div class="layui-input-block">
                                    <span class="task-form-text" id="initiator">刘敏</span>
                                </div>
                            </div>


                            <!--意见时间线-->
                            <div class="layui-form-item">
                                <div class="layui-timeline" style="padding: 15px;" id="timeline"></div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item" style="width: 100%;height: 500px;">
                        <!--流程图-->
                        <div id="lf-graph"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="button" class="pear-btn pear-btn-md" lay-on="close">取消</button>
        </div>
    </div>
</div>


<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/permission.js"></script>
<script src="../../../lms/config.js"></script>

<script type="text/javascript" src="../../../logicflow/core/dist/logic-flow.js"></script>
<!--LogicFlow的插件引入-->
<script type="text/javascript" src="../../../logicflow/extension/lib/Menu.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/DndPanel.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/Control.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/MiniMap.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/Group.js"></script>
<!--LogicFlow定制模型引入-->
<script type="text/javascript" src="../../../logicflow/customized/start.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/task.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/fork.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/join.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/subProcess.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/wfSubProcess.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/end.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/custom.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/decision.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/transition.js"></script>

<script>

    const PRIMARY_KEY = "id";
    const DETAIL_API = lms_config.api_url + "/adminapi/wf/order/get";
    const HIGH_LIGHT_API = lms_config.api_url + "/adminapi/wf/order/highLightData";
    const LIST_HISBY_ORDER_API = lms_config.api_url + "/adminapi/wf/task/listHisByOrderId";
    let order_state = ["已完成", "进行中", "强制中止", "不同意(强制中止)", "取回流程(强制中止)", "作废流程(强制中止)", "驳回流程(强制中止)"];

    // 字段设置
    layui.use(["common", "form", "jquery", "dropdown", "util"], function () {
        let form = layui.form;
        let util = layui.util;
        let $ = layui.jquery;
        let htmlFilePath = '../../../view/wf/template/'
        let logicfolw;

        /**
         * 流程图渲染
         * @param data
         */
        const lf = new LogicFlow({
            container: document.querySelector("#lf-graph"),
            grid: {
                size: 20,
                visible: true,
                type: 'dot',
                config: {
                    color: '#ababab',
                    thickness: 1,
                },
            },
            plugins: [Menu, DndPanel, Control, MiniMap, Group],
            keyboard: {
                enabled: true,//是否启用快捷键
                shortcuts: [
                    {
                        keys: ["del"],
                        callback: () => {
                            if (!lf) return;
                            const elements = lf.getSelectElements(true);
                            lf.clearSelectElements();
                            elements.edges.forEach((edge) => lf.deleteEdge(edge.id));
                            elements.nodes.forEach((node) => lf.deleteNode(node.id));
                        }
                    }
                ]
            }
        });

        //图像注册
        lf.register(Task);
        lf.register(Fork);
        lf.register(Start);
        lf.register(Decision);
        lf.register(End);
        lf.register(Join);
        lf.register(Custom);
        lf.register(SubProcess);
        lf.register(WfSubProcess);
        lf.register(Transition);

        /***
         * 任务详情
         */
        function get() {
            layui.$.ajax({
                url: DETAIL_API,
                type: 'POST',
                dateType: "json",
                async: false,
                contentType: 'application/json',
                data: JSON.stringify({id: getQueryString(PRIMARY_KEY)}),
                success: function (ret) {
                    if (ret.status == 200) {
                        let process = ret.data['processs'] ?? [];
                        let instanceUrl = process['instance_url'] ?? '';
                        logicfolw = process['content'] != undefined ? process['content'] : {};
                        formRendering(htmlFilePath + instanceUrl);//表单渲染
                        highLightData(ret.data['id']);//高亮数据
                        listHisByOrderId(ret.data['id'])//历史记录
                        //实例详情
                        let forms = ret.data['variable'] != undefined ? ret.data['variable'] : {};
                        $('#process-name').html(process['display_name'] ?? '');
                        $('#state').html(order_state[ret.data['order_state'] ?? 0]);
                        $('#initiator').html(forms['operator_real_name'] ?? '');

                        //表单渲染
                        form.val('forms', forms)

                        window.onload = function () {
                            // 获取表单元素
                            let container = document.getElementById("form-container");
                            // 遍历表单元素设置为只读
                            for (let i = 0; i < container.elements.length; i++) {
                                let element = container.elements[i];
                                element.disabled = true;
                            }
                        };

                        lf.render(logicfolw);
                        form.render();
                        //流程图渲染
                    }
                }
            });
        }


        /**
         * 高亮数据获取
         * @param orderId
         * @returns {boolean}
         */
        function highLightData(orderId) {
            if (orderId === '') {
                return false;
            }
            layui.$.ajax({
                url: HIGH_LIGHT_API,
                type: 'POST',
                dateType: "json",
                contentType: 'application/json',
                data: JSON.stringify({id: orderId}),
                success: function (ret) {
                    if (ret.status == 200) {
                        let data = ret.data !== undefined ? ret.data : [];
                        setHighLight(data)
                    }
                }
            });
        }

        /**
         * 历史审核意见
         * @param orderId
         */
        function listHisByOrderId(orderId) {
            layui.$.ajax({
                url: LIST_HISBY_ORDER_API,
                type: 'POST',
                dateType: "json",
                contentType: 'application/json',
                data: JSON.stringify({id: orderId}),
                success: function (ret) {
                    if (ret.status == 200) {
                        let data = ret.data != undefined ? ret.data : [];
                        let html = '';
                        $.each(data, function (index, item) {
                            let map = item['variable'] != undefined ? item['variable'] : [];
                            let approval_opinion = map.approval_opinion != undefined ? map.approval_opinion : '';
                            html += '<div class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis"></i> <div class="layui-timeline-content layui-text"> <h3 class="layui-timeline-title">' + item.finish_time + '</h3> <p>' + item.display_name + ':' + map.operator_real_name + '</p><span>审核意见:' + approval_opinion + '</span></div> </div>'
                        })
                        $('#timeline').html(html);
                    }
                }
            });

        }

        /**
         * 高亮设置
         * @param data
         */
        function setHighLight(data) {
            if (!lf || !data) {
                return;
            }
            // 设置历史节点
            if (data) {
                if (data['history_node_names'] !== undefined) {
                    data['history_node_names'].forEach(nodeName => {
                        let nodeModel = lf.getNodeModelById(nodeName)
                        if (nodeModel) {
                            nodeModel.setProperties({state: 'history'})
                        }
                    })
                }
            }
            // 设置历史边
            if (data && data['history_edge_names']) {
                data['history_edge_names'].forEach(edgeName => {
                    let edgeModel = lf.getEdgeModelById(edgeName)
                    if (edgeModel) {
                        edgeModel.setProperties({state: 'history'})
                    }
                })
            }

            // 设置当前节点
            if (data && data['active_node_names']) {
                data['active_node_names'].forEach(nodeName => {
                    lf.setProperties(nodeName, {state: 'active'})
                })
            }
        }

        /**
         * 表单渲染
         * @param htmlFilePath
         * @returns {boolean}
         */
        function formRendering(htmlFilePath) {
            if (htmlFilePath === '') {
                $('#form-container').html('')
                return false
            }
            $.ajax({
                url: htmlFilePath + '.html', // test.html文件的路径
                type: 'GET',
                dataType: 'html',
                async: false,
                success: function (response) {
                    //将HTML代码插入到页面中
                    $('#form-container').html(response);
                }
            });
        }

        util.on('lay-on', {
            close: function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            }
        });

        get();
    });


</script>

</body>
</html>
